<template>
  <div class="favorite">
    <Header></Header>
    <div class="main">
      <div class="top">
        <div class="top-left">历史记录</div>
        <div class="top-right">
          <el-checkbox v-if="manageIf" v-model="allIf">全选</el-checkbox>
          <span class="delete" v-if="manageIf">
            <i class="iconfont icon-delete"></i>
            <span @click="del()">删除</span>
          </span>
          <span @click="change()">{{manageIf ? '取消管理' : '批量管理'}}</span>
          <el-input type="text" placeholder="宝贝搜索" prefix-icon="iconfont icon-search" v-model="input" @keyup.enter.native="search()"></el-input>
          <el-button @click="search()">搜索</el-button>
        </div>
      </div>
      <div class="list">
        <ul>
          <li class="list-item" v-for="(item, index) in goodsList" :key="index" @click="!manageIf && toItemDetial(item)">
            <div class="list-item-div">
              <div class=
              "list-item-div-over" @click="lock(item, index)" v-if="manageIf" :ref="`over${index}`">
                <i class="iconfont icon-roundcheckfill"></i>
              </div>
              <img :src="`http://localhost:8080/api/v1/images/${item.imageDir}/hi_res.jpg`" alt="">
              <div style="color: #666;">{{item.name}}</div>
              <div style="color: #f40;
          font-size: 18px;
          text-align: right;">￥{{item.price}}</div>
              <div style="text-align: right;">{{item.time}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  },
  data () {
    return {
      manageIf: false,
      allIf: false,
      input: '',
      goodsList: [],
      selection: [],
      tempList: []
    }
  },
  watch: {
    selection () {
      if (this.selection.length === this.goodsList.length) {
        this.allIf = true
      }
    },
    allIf () {
      if (this.allIf) {
        this.selection = this.goodsList
        this.opacity('0.8')
      } else {
        this.selection = []
        this.opacity('')
      }
    },
    input () {
      if (!this.input && this.tempList) {
        this.goodsList = this.tempList
        this.tempList = []
      }
    }
  },
  methods: {
    del () {
      this.goodsList = this.goodsList.filter(i => !this.selection.includes(i))
      this.opacity('')
      for (let i = 0; i < this.selection.length; i++) {
        this.$http.delete('history', {
          params: {
            userId: JSON.parse(this.$cookie.get('userInfo')).userId,
            time: this.selection[i].time
          }
        }).then((res) => {
          console.log(res)
        })
      }
      this.selection = []
    },
    change () {
      this.manageIf = !this.manageIf
    },
    search () {
      if (this.input) {
        this.tempList = this.goodsList
        this.goodsList = this.goodsList.filter(i => i.name.match(this.input))
      }
    },
    lock (val, i) {
      this.selection.push(val)
      if (!this.$refs[`over${i}`][0].style.opacity) {
        this.$refs[`over${i}`][0].style.opacity = '0.8'
      } else {
        this.$refs[`over${i}`][0].style.opacity = ''
      }
    },
    opacity (val) {
      for (let i = 0; i < this.goodsList.length; i++) {
        this.$refs[`over${i}`][0].style.opacity = val
      }
    },
    toItemDetial (item) {
      this.$router.push({ path: '/ItemDetail', query: { item: item.itemId } })
    }
  },
  mounted () {
    this.$http.get('history', {
      params: {
        userId: JSON.parse(this.$cookie.get('userInfo')).userId
      }
    }).then((res) => {
      this.goodsList = res.data
      console.log(res)
    }).catch((err) => {
      console.log(err.response)
    })
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 80%;
  margin: 0 auto;
  .top {
    height: 50px;
    display: flex;
    position: relative;
    border-bottom: 1px solid rgb(255, 209, 193);
    .top-left {
      width: 18%;
      height: 100%;
      border-bottom: 1px solid #f40;
      font-size: 24px;
      color: #f40;
      text-align: center;
      line-height: 50px;
    }
    .top-right {
      position: absolute;
      right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 120px;
        line-height: 50px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
      }
      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #f3b39e;
        border: none;
      }
      /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: rgb(236, 89, 40);
      }
      .delete {
        margin-left: 4px;
        color: #666;
      }
    }
  }
  .list {
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    display: flex;
    overflow: hidden;
    ul {
      padding: 0;
      position: relative;
    }
    .list-item {
      list-style: none;
      width: 200px;
      height: 280px;
      margin: 6px;
      float: left;
      z-index: 2;
      .list-item-div {
        img {
          object-fit: cover;
          width: 100%;
        }
        .list-item-div-over {
          width: 200px;
          height: 280px;
          position: absolute;
          z-index: 10;
          background-color: #666;
          opacity: 0.5;
          .iconfont {
            font-size: 50px;
            opacity: 1;
            color: #f40;
          }
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
